<template>
	<view>
		<u-navbar placeholder :autoBack="true" title="核销票券"></u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight, backgroundColor: '#f5f5f5'}">
			<view :style="{backgroundColor: appColor}" class="parking-top">
				<text style="color: #fff;font-size: 44rpx;letter-spacing: 2rpx;">{{detail.type == 1 ? '优惠券' : detail.type == 2 ? '门票' : '未查询到相关票券'}}</text>
			</view>
			<template v-if="isShow === 1">
				<view style="padding: 32rpx;" v-if="detail.type == 2">
					<view style="padding: 32rpx;background-color: #fff;border-radius: 8rpx;">
						<view style="font-size: 36rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;">
							<text>门票详情</text>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>游玩时间:</text>
							</view>
							<view class="detail-cell-r">
								<text>{{detail.ticketTime}}</text>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>门票名称:</text>
							</view>
							<view class="detail-cell-r">
								<text>{{detail.ticketName}}</text>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>游玩人数:</text>
							</view>
							<view class="detail-cell-r">
								<text>x{{detail.buyCount}}</text>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>核销状态:</text>
							</view>
							<view class="detail-cell-r">
								<text style="color: #f40215;">{{detail.status_dictText}}</text>
							</view>
						</view>
					</view>
				</view>
				<view style="padding: 32rpx;" v-else-if="detail.type == 1">
					<view style="padding: 32rpx;background-color: #fff;border-radius: 8rpx;">
						<view style="font-size: 36rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;">
							<text>优惠券详情</text>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>优惠券:</text>
							</view>
							<view class="detail-cell-r">
								<text>{{detail.couponName}}</text>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>有效期至:</text>
							</view>
							<view class="detail-cell-r">
								<text v-if="detail.expiryType === '1'">{{Number(detail.expiryDay) === 0 ? '长期有效' : `${detail.endTime}到期`}}</text>
								<text v-else>{{detail.startTime}}至{{detail.endTime}}有效</text>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>优惠金额:</text>
							</view>
							<view class="detail-cell-r">
								<text style="color: #f40215;">&yen;{{detail.discount}}</text>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>核销状态:</text>
							</view>
							<view class="detail-cell-r">
								<text style="color: #f40215;">{{detail.status_dictText}}</text>
							</view>
						</view>
					</view>
				</view>
				<view style="padding: 32rpx;" v-else>
					<u-empty
					    mode="search"
						icon="http://cdn.uviewui.com/uview/empty/search.png"
					>
					</u-empty>
				</view>
			</template>
			<template v-else>
				<view style="height: 160rpx;"/>
				<view style="display: flex;justify-content: center;align-items: center;">
					<u-icon v-if="isShow === 2" size="56" :color="appColor" name="checkmark-circle-fill"></u-icon>
					<u-icon v-else-if="isShow === 3" size="56" color="#f40215" name="close-circle-fill"></u-icon>
				</view>
				<view style="height: 60rpx;"/>
				<view class="pay-title" v-if="isShow === 2">核销成功</view>
				<view class="pay-title" v-else-if="isShow === 3">核销失败</view>
				<view style="height: 96rpx;"/>
				<!-- <u-button @click="continueOrder" shape="circle" :color="appColor" text="继续认养"></u-button> -->
				<!-- <u-button @click="checkOrder" shape="circle" :color="appColor" text="查看订单"></u-button> -->
				<view style="display: flex;align-items: center;justify-content: center;">
					<view style="width: 40%;">
						<u-button shape="circle" text="继续核销" :color="appColor" @click="continuCheck"></u-button>
					</view>
				</view>
				
			</template>
		</scroll-view>
		<view class="good-detail-bootom">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-r">
					<u-button :disabled="detail.status === '3'" :throttleTime="300" @click="save" :color="appColor" text="确认核销" shape="circle"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions, mapState} from 'vuex';
	import {notice} from '@/api/home.js';
	import {checkTicket, getTickets} from '@/api/home.js';
	export default {
		data() {
			return {
				isShow: 1
			}
		},
		computed: {
			...mapState(['detail']),
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		methods: {
			...mapActions(['setDetail']),
			save() {
				const {codeId, type} = this.detail;
				checkTicket({id: codeId, type}).then(res => {
					const {message, code} = res;
					if(code === 200) {
						this.isShow = 2
						this.$cuTip('核销成功');
					} else {
						this.isShow = 3
						this.$cuTip(message);
					}
				})
			},
			continuCheck() {
				this.isShow = 1;
				const that = this;
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: function(res) {
						if (res.result) {
							try{
								const result1 = JSON.parse(res.result);
								that.$cuLoading('查询中...').then(() => {
									getTickets(result1).then((res) => {
										const {code, success, result} = res;
										if(code === 200 && success) {
											that.setDetail({detail: Object.assign(result, {codeId: result1.id, type: result1.type})});
										} else {
											that.setDetail({});
										}
									}).finally(() => {
										uni.hideLoading();
									});
								})
							}catch(e){
								that.$cuTip('非正常二维码');
								//TODO handle the exception
							}
						}
					}
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.pay-title {
		font-size: 32rpx;
		color: #000;
		text-align: center;
	}
	.parking-top {
		height: 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.detail-cell {
		display: flex;
		font: size 28rpx; 
		color: #333;
		margin-bottom: 32rpx;
		&:last-child {
			margin-bottom: 0rpx;
		}
		.detail-cell-l {
			width: 160rpx;
		}
		.detail-cell-r {
			flex: 1;
		}
	}
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 iOS>11.2*/
		box-sizing: content-box;
	
		.good-detail-bootom-r {
			flex: 1;
			text-align: right
		}
	}
</style>
